<template>
    <el-scrollbar>
        <div :class="{ hidden: hidden }" class="pagination">
            <!-- v-show="tableTotal > 0"  -->
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="pageSizes" :size="size" :disabled="disabled" :background="background"
                :layout="layout" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </el-scrollbar>

</template>

<script lang="ts" setup>
import type { ComponentSize } from 'element-plus'

const props =  defineProps({
    page: {
        type: Number,
        default: 1,
    },
    limit: {
        type: Number,
        default: 20,
    },
    layout: {
        type: String,
        default: "total, sizes, prev, pager, next, jumper",
    },
    total: {
        type: Number,
        default: 20,
    },
    pageSizes: {
        type: Array as PropType<number[]>,
        default() {
        return [10, 20, 30, 50];
        },
    },
    size: {
        type:  String as () => ComponentSize,
        default: "default"
    },
    disabled: {
        type: Boolean,
        default: false
    } ,
    background: {
        type: Boolean,
        default: true
    } ,
    hidden: {
        type: Boolean,
        default: false,
    }
})
// 要想改变props的值需要用useModel,而且要和emit，为了通知父组件相关数据已经发生
// "update:page"不加的话vue会给出警告
const emit = defineEmits(["pagination", "update:page", "update:limit"]);
const currentPage = useVModel(props, "page", emit);
const pageSize = useVModel(props, "limit", emit);

function handleSizeChange(val: number) {
    emit("pagination");
}

function handleCurrentChange(val: number) {
    emit("pagination");
}
</script>
<style lang="scss" scoped>
.pagination {
  padding: 12px;

  &.hidden {
    display: none;
  }
}
</style>
